<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>提交办理</title>
    <link rel="stylesheet" th:href="@{/resources/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/resources/awi/css/font-awesome.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/ztree/css/ztreeStyle/ztreeStyle.css}">
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-12">
            <h4 class="header">提交办理</h4>
            <hr>
        </div>
        <div class="col-md-9">
            <input type="hidden" name="taskId" th:value="${taskId}">
            <table class="table table-bordered">
                <tr>
                    <td style="width: 120px;">办理意见</td>
                    <td>
                        <textarea id="opinion" name="opinion" class="form-control" rows="5">[[${opinion}]]</textarea>
                    </td>
                </tr>
                <tr>
                    <td>下一步处理人</td>
                    <td>
                        <div style="height: 200px;overflow: scroll;overflow-x: hidden;overflow-y: auto">
                            <ul class="ztree" id="next-handler-tree"></ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>抄送至（可多选）</td>
                    <td>
                        <div style="height: 200px;overflow: scroll;overflow-x: hidden;overflow-y: auto">
                            <ul class="ztree" id="copyto-tree"></ul>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-3">
            <div class="panel panel-warning">
                <div class="panel-heading">功能说明</div>
                <div class="panel-body">
                    <ol>
                        <li>下一步处理人，做为下一步骤节点任务主要处理人，只能选择一人，若需选择多人办理，请点击返回上一页面，点击会签按钮</li>
                        <li>选择抄送人员后，所选人员可看到该条流程，但只能看流程流转情况，不能直接办理，仅起到通知作用</li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <hr>
            <button type="button" class="btn btn-primary center-block" onclick="submitProcess()">提交办理</button>
        </div>
    </div>
</div>
</body>
<script th:src="@{/resources/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/resources/layer/layer.js}"></script>
<script th:src="@{/resources/plugins/plugins-init/plugins-init.js}"></script>
<script th:src="@{/resources/plugins/ztree/js/jquery.ztree.all.js}"></script>
<script type="text/javascript">
    var userTree;
    $(function () {
        $.get("/authUser/listUserTree", function (response) {
            userTree = response.data;
            showNextHandlerTree();
            showCopytoTree();

        })
    })
    var nextHandlerTree;
    function showNextHandlerTree() {
        var setting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        nextHandlerTree = $.fn.zTree.init($("#next-handler-tree"), setting, userTree);

    }
    var copytoTree;
    function showCopytoTree() {
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        copytoTree = $.fn.zTree.init($("#copyto-tree"), setting, userTree);
    }

    function submitProcess(){
        var submitData={};
        submitData['opinion']=$("#opinion").val();
        submitData['copytoUids']=[];
        var copytoNodes = copytoTree.getCheckedNodes(true);
        $.each(copytoNodes,function(index,item){
            if(!item.isParent){
                submitData['copytoUids'].push(item.id);
            }
        });
        var nextHandlerNodes =nextHandlerTree.getCheckedNodes(true);
        if(0==nextHandlerNodes.length){
           layer.msg('请选择下一步处理人！');
        }else{
            submitData['nextHandlerUid']=nextHandlerNodes[0].id;
        }

        alert(JSON.stringify(submitData));


    }


</script>
</html>